<template>
  <div class="base-box">
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <table style="width: 100%" cellspacing="0" cellpadding="0">
          <!-- <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr> -->
          <tr>
            <td>水库名称</td>
            <td>{{ `水库名称` }}</td>
            <td>水库规模</td>
            <td>{{ `大型` }}</td>
            <td>水库类型</td>
            <td>{{ `--` }}</td>
          </tr>
          <tr>
            <td>所属区分</td>
            <td>{{ `多庄镇` }}</td>
            <td>所在流域</td>
            <td>{{ `--` }}</td>
            <td>流域面积</td>
            <td>{{ `1690km` }}</td>
          </tr>
          <tr>
            <td>建成时间</td>
            <td>{{ `1960-04-30` }}</td>
            <td>管理单位</td>
            <td>{{ `--` }}</td>
            <td>所在位置</td>
            <td>{{ `1690km` }}</td>
          </tr>
          <tr>
            <td>安全鉴定开展情况</td>
            <td>{{ `开展过` }}</td>
            <td>安全鉴定完成情况</td>
            <td>{{ 202108 }}</td>
            <td>安全鉴定结果</td>
            <td>{{ `1类坝` }}</td>
          </tr>
          <tr>
            <td>除险加固是否完成</td>
            <td colspan="5">{{ `--` }}</td>
          </tr>
          <tr>
            <td>水库简介</td>
            <td colspan="5">{{ `是的发送到发疯的发送发送到发的是放大书法大师放大书法的撒风` }}</td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane label="水库特征值信息">Config</el-tab-pane>
      <el-tab-pane label="水位库容曲线">
        <line-chart
          :x-labels="[
            '5/1',
            '5/6',
            '5/8',
            '5/10',
            '5/12',
            '5/14',
            '5/15',
            '5/16',
            '5/18',
            '5/26',
            '5/28',
            '5/30'
          ]"
          :y-values="[20, 12, 91, 24, 20, 30, 10, 20, 54, 90, 30, 41]"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import lineChart from '@/components/app-echart/line-chart.vue'
const state = reactive({})
</script>

<style lang="less" scoped>
table,
th,
td {
  border: 1px solid grey;
  width: 150px;
  height: 50px;
  text-align: center;
}

tr {
  td:nth-child(1) {
    background: green;
    color: white;
  }
  td:nth-child(3) {
    background: green;
    color: white;
  }
  td:nth-child(5) {
    background: green;
    color: white;
  }
}
</style>
